//@ts-nocheck

import * as d3 from "d3";
import { Chart } from "./base";
import { Axis, defaultInitAxisSettings } from "./axis";
import { Scale } from "./scale";
import { Arrow } from "./arrow"
import { Face } from "./face";


const chart = new Chart("chart");

const svg = chart.getSVG();
const scale = new Scale();
let myAxisSettings = {...defaultInitAxisSettings};
myAxisSettings.scale = scale;
myAxisSettings.textRotateDegrees = -45;
const axis = new Axis(myAxisSettings);
const arrow = new Arrow();
const face = new Face();
let axis_svg = axis.getSVG();
let arrow_svg = arrow.getSVG();
let face_svg = face.getSVG();

svg.append(()=>axis_svg.node());
svg.append(()=>arrow_svg.node());
svg.append(()=>face_svg.node());
svg.attr("transform", `rotate(45) translate(0, 0) scale(1)`);

function genrateRandomNumber(min: number, max: number) {
	let min1: number = Math.ceil(min);
	let max1: number = Math.floor(max);
	return Math.floor(Math.random() * (max1 - min1 + 1)) + min1; 
}


 setInterval(() => {
	let x =genrateRandomNumber(0, 240);
	// console.log(x);
    arrow.setValue(x);
	face.setValue(x);
  }, 2000);



const width = 400;
const height = Math.min(width, 500);
const radius = Math.min(width, height) / 2;

// let data = [{number: 4, color: "blue"}, {number: 1, color: "red"}]

// svg.append("path")
//     .attr("transform", "translate(500,200)")
//     //.attr("fill", "red")
//     .attr("d", d3.arc()({
//       innerRadius: radius - 10,
//       outerRadius: radius,
//       startAngle: -Math.PI / 1.5,
//       endAngle: Math.PI / 1.5,
//     }));
// const arc = d3.arc()
//       .startAngle(-Math.PI / 1.5)
//       .endAngle(Math.PI / 1.5)
//       .innerRadius(radius - 11)
//       .outerRadius(radius - 1);


//     .attr("transform", "translate(500,200)")
//     .attr("fill", "green")
//     .attr("d", d3.arc()({
//       innerRadius: 190,
//       outerRadius: 200,
//       startAngle: (-Math.PI / 4) + 0.02,
//       endAngle: Math.PI / 3,
//     }));

// const pie = d3.pie()
//       .startAngle(-Math.PI)
//       .endAngle(Math.PI / 1.5)
//       .padAngle(1 / radius)
//       .sort(null)
//       .value((d: any) => d.number);

// const arcs = pie(data)

// let scale = d3.scalePow().exponent(0.6).domain([0, 300]).rangeRound([0, 800])
// let x = 300;
// let y = scale(6);
// console.log(x)

// svg.append("g")
//   .attr("transform", "translate(500,200)")
//   .selectAll()
//   .data(arcs)
//   .join("path")
//     .attr("fill", d => d.data.color)
//     .attr("fill-opacity", 0.1)
//     .attr("stroke", "black")
//     .attr("d", arc);






// let arrow = d3.path();
//   arrow.moveTo(503, 230);
//   arrow.lineTo(497, 230);
//   arrow.lineTo(499, 20);
//   arrow.lineTo(501, 20);
//   arrow.lineTo(503, 230);
//   arrow.closePath();
// svg.append("path")
// .attr("d", arrow)
// .attr("stroke", "black")
// .attr("fill", "red")
//.attr("transform", "rotate( -90, 500, 200)")

// let g2 = svg.append("g");
// let g1 = g2.append("g");
// let g = g1.append("g");
//   g.append("polygon")
//   .attr("points", "499,380 501,380 503,170 497,170")
//   .attr("stroke", "black")
//   .attr("fill", "red")

//   g.append("circle")
//   .attr("r", 7)
//   .attr("cx", 500)
//   .attr("cy", 200);
//   g.attr("transform", "translate(-500, -200)");
//   g2.attr("transform", "translate(+500, +200)");
//   g1.transition()
//   .duration(2000)
//   .ease(d3.easeElastic)
//   .attr("transform", `rotate(${scale(x)})`);

 // let interp = d3.interpolateTransformSvg(, g1.attr("transform", `rotate(${x})`)());
 // console.log(interp);
//   g1.transition()
//   .duration(4000)
//   .delay(200)
//   .attr("transform", `rotate(${y-x})`);


// let axis = d3.axisTop()





